<template>
  <div class="roleStyle">
    <button class="tech-button" style="margin-top: 20px;margin-left: 20px;margin-bottom: 20px" @click="showDialog = true">商店</button>
    <button style="margin-left: 60px" class="dismissStyle" @click="deleteByIds">批量解雇</button>
    <span class="cardStyle" style="width: 200px;height: 40px;margin-left: 60px">
      <i class="el-icon-search" style="color: #D3DCE6;font-size: 30px"></i>
      <select @keyup.enter.native="load" class="selectStyle" v-model="selectValue" style="width: 200px;height: 40px;margin-left: 30px">
        <option value="">请选择标签</option>
        <option value="农民">农民</option>
        <option value="工人">工人</option>
        <option value="学生">学生</option>
        <option value="退役军人">退役军人</option>
        <option value="企业家">企业家</option>
        <option value="医生">医生</option>
      </select>
      <button class="searchStyle" style="margin-left: 60px" @click="search">搜索</button>
      <button class="resetStyle" style="margin-left: 60px" @click="reset">重置</button>
    </span>
    <el-dialog :visible.sync="showDialog" title="商店系统"
               class="storeStyle"
               style="width: 155%;
               position: absolute;
        left: -400px"
    >
      <el-table :data="storeData" class="tableStyle" style="align: center;font-size: 18px">
        <el-table-column
          prop="nickname"
          label="标签"
          width="170"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper" style="font-size: 20px">
              <span :style="chooseType(scope.row.nickname)">{{ scope.row.nickname }}</span>
            </div>
          </template>

        </el-table-column>
        <el-table-column prop="hp" label="生命值" width="160">
        </el-table-column>
        <el-table-column prop="mp" label="技能值" width="160">
        </el-table-column>
        <el-table-column prop="attack" label="攻击力" width="160">
        </el-table-column>
        <el-table-column prop="defence" label="防御值" width="160">
        </el-table-column>
        <el-table-column prop="cost" label="招募值" width="160">
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="slot">
            <button class="zhaomu" @click="recruit(slot.row)">招募</button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-table :data="tableData" style="align: center;line-height: 50px;opacity: 0.6" @selection-change="handleSelect">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="id" label="编号" width="120">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="标签"
        width="160"
      >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" style="font-size: 20px">
            <span :style="chooseType(scope.row.nickname)">{{ scope.row.nickname }}</span>
          </div>
        </template>

      </el-table-column>
      <el-table-column prop="hp" label="生命值" width="160">
      </el-table-column>
      <el-table-column prop="mp" label="技能值" width="160">
      </el-table-column>
      <el-table-column prop="attack" label="攻击力" width="160">
      </el-table-column>
      <el-table-column prop="defence" label="防御值" width="160">
      </el-table-column>
      <el-table-column prop="cost" label="招募值" width="160">
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="slot">
          <button class="gradient-button-2" @click="dismiss(slot.row.id)">解雇</button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum  "
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {Dialog, Table} from 'element-ui';
import {toArray} from "core-js/internals/async-iterator-iteration";

export default {
  name: "Role",
  data() {
    return {
      showDialog: false,
      selectValue: '',
      selectIds: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      id: 0,
      nickname: "",
      hp: 0,
      mp: 0,
      attack: 0,
      defence: 0,
      cost: '',
      storeData: [  //Array(8).fill(item)
        {
          id: 1,
          nickname: '农民',
          hp: 135,
          mp: 50,
          attack: 30,
          defence: 25,
          cost: 3
        },
        {
          id: 2,
          nickname: '工人',
          hp: 130,
          mp: 55,
          attack: 35,
          defence: 20,
          cost: 3
        },
        {
          id: 3,
          nickname: '学生',
          hp: 110,
          mp: 70,
          attack: 20,
          defence: 20,
          cost: 4
        },
        {
          id: 4,
          nickname: '退役军人',
          hp: 200,
          mp: 30,
          attack: 50,
          defence: 35,
          cost: 6
        },
        {
          id: 5,
          nickname: '企业家',
          hp: 100,
          mp: 80,
          attack: 25,
          defence: 15,
          cost: 5
        },
        {
          id: 6,
          nickname: '医生',
          hp: 120,
          mp: 60,
          attack: 30,
          defence: 15,
          cost: 5
        },

      ],
    }
  },
  components: {
    [Dialog.name]: Dialog,
    [Table.name]: Table
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.axios.get(this.BASE_URL + "/role/page",{
        params:{
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.selectValue
        }
      }).then(res => {
        this.tableData = res.data.data.data
        this.total = res.data.data.total
        console.log(res.data)
      })
    },
    search(){
      this.load()
    },
    reset(){
      this.selectValue = ''
      this.load()
    },
    deleteByIds() {
      if(this.selectIds.length == 0)return this.$message.error("未选择任何角色，操作失败")
      this.$confirm('你确定要删除选中的所有角色吗？此操作将永久删除角色', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.axios.post(this.BASE_URL + '/role/dismiss', this.selectIds).then(res => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '解雇选中角色成功!'
            });
            this.load()
          } else {
            this.$message.error("解雇失败:" + res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    handleSelect(selection) {
      this.selectIds = selection.map(item => item.id)
    },
    recruit(role) {
      this.axios.post(this.BASE_URL + "/role/recruit", role).then(res => {
        if (res.data.code === '200') {
          this.$message.success("招募成功")
          this.load()
        } else {
          this.$message.error("招募失败")
        }
      })
    },
    dismiss(id) {
      const ids = Array.of(id)
      this.$confirm('此操作将永久解雇该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.axios.post(this.BASE_URL + '/role/dismiss', ids).then(res => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '解雇成功!'
            });
            this.load()
          } else {
            this.$message.error("解雇失败:" + res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    chooseType(name) {
      if (name == '农民') return 'background: orange'
      else if (name == '工人') return 'background: #97694F;color: #40E0D0'
      else if (name == '学生') return 'background: #007FFF;color: #7FFF00'
      else if (name == '退役军人') return 'background: #BC1717;color: #D9D9F3'
      else if (name == '企业家') return 'background: yellow;color: #97694F'
      else if (name == '医生') return 'background: #70DBDB;color: #426F42'
    },
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.pageNum = pageNum
      this.load()
    }
  }
}
</script>

<style scoped>
@import "../css/cssStyle.css";
</style>
